<template>
  <div class="context_menu" :style="positionStyle" v-if="this.$route.path === '/home/project'">
    <div class="content">
      <ul>
        <!--预览工程状态下不显示-->
        <template v-if="!otherState.previewProjectFlow">
          <li @click="deleteLine" :class="{ disableClass: flowData.isRunning }">
            <i class="fa fa-trash-o"></i>删除
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightMenuDelLine",
  data: function() {
    return {};
  },
  computed: {
    flowData: function() {
      return this.$store.state.project.flowData;
    },
    positionStyle: function() {
      var msg = this.flowData.contextMenuMsg;
      var extraCounts = this.countExtraMenu();
      var top =
        msg.top == 0
          ? 0
          : msg.top - extraCounts * 26 > 0
            ? msg.top - extraCounts * 26
            : 0;
      return {
        left: msg.left + "px",
        top: top + "px",
        display: msg.display
      };
    },
    otherState: function() {
      return this.$store.state.global.otherState;
    },
    viewSource: function() {
      //查看源码
      var result = false;
      try {
        result = this.flowData.currentNodeItem.allowViewSource;
      } catch (e) {
        console.error(e.message);
      }
      return result;
    },
    viewResult: function() {
      //查看结果
      var result = false;
      try {
        result = this.flowData.currentNodeItem.hasReport;
      } catch (e) {
        console.error(e.message);
      }
      return result;
    },
    showChild: function() {
      //判断是否展示
      var result = false;
      this.childItems.forEach(function(item) {
        if (item.canPreview) {
          result = true;
        }
      });
      return result;
    },
    childItems: function() {
      var curNode = this.flowData.currentNodeItem;
      var result = [];
      if (curNode.outputs) {
        curNode.outputs.forEach(function(output, index) {
          var tempItem = {};
          tempItem["name"] = output.description;
          tempItem["value"] = output.value;
          tempItem["id"] = output.id;
          tempItem["model"] = output.model;
          tempItem["canPreview"] = output.canPreview;
          result.push(tempItem);
        });
      }
      return result;
    }
  },
  methods: {
    countExtraMenu: function() {
      //计算额外菜单数量
      var count = 0;
      if (this.viewResult) {
        //查看结果
        count += 1;
      }
      if (this.viewSource) {
        //查看源码
        count += 1;
      }
      if (this.showChild) {
        //查看数据 & 可视化
        count += 2;
      }
      return count;
    },
    deleteLine: function() {
      if (this.flowData.isRunning) {
        this.$notify({
          message: "流程运行中，不允许该操作！",
          type: "warning"
        });
        return;
      }
      this.$store.dispatch("removeFlowPath");
    }
  }
};
</script>

<style>
.disableClass {
  background: #dcd5dd;
  color: #a08888;
}

.disableClass:hover {
  background: #dcd5dd;
  color: #a08888;
}

.context_menu .child_menu {
  background: #fff;
  padding: 6px 0;
  border: 1px solid #ccc;
  box-shadow: 0 0 6px rgba(102, 102, 102, 0.3);
  min-width: 150px;
  z-index: 99;
  position: absolute;
  border-radius: 2px;
}

.context_menu .content ul li {
  line-height: 26px;
  height: 26px;
  display: block;
  padding: 0 16px;
  cursor: pointer;
  white-space: nowrap;
  width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context_menu .content ul li i {
  color: #999;
  margin-right: 8px;
  width: 16px;
  text-align: right;
}

.context_menu .content ul li .child_menu {
  margin-left: 133px;
  margin-right: -133px;
  margin-top: -33px;
}

.context_menu .content ul li:hover {
  background: #fbe8ca;
  color: #000;
}

.context_menu .content ul li:hover i {
  color: #666;
}

.context_menu .content ul li.iLine {
  height: 10px;
  position: relative;
  cursor: default;
}

.context_menu .content ul li.iLine:hover {
  background: none;
}

.context_menu .content ul li.iLine:before {
  content: "";
  height: 1px;
  border-top: 1px dotted #dfdfdf;
  width: calc(100% - 20px);
  position: absolute;
  top: 4px;
  left: 10px;
}

hr {
  display: block;
  -webkit-margin-before: 0.2em;
  -webkit-margin-after: 0.1em;
  -webkit-margin-start: auto;
  -webkit-margin-end: auto;
  border-style: inset;
  margin: 0px 0px;
  border: 1px solid #ccc;
}
</style>
